<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;position: absolute;left: 0;}
    .box1{top: 0;background: #399;}
    .box2{top: 110px;background: #339;}
    .box3{top: 220px;background: #393;}
    .box4{top: 330px;background: #939;}
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</body>
<script>

  var ele = null;

  var boxs = document.querySelectorAll(".box");

  for(var i=0;i<boxs.length;i++){
    boxs[i].onclick = function(){
      ele = this;
    }
  }

  // 方向键控制元素移动
  document.onkeydown = function(eve){
    var e = eve || window.event;
    var code = e.keyCode || e.which;
    // 判断键码    
    switch(code){
      case 37:
                        // 获取原始位置，修改后，设置回去
        ele.style.left = ele.offsetLeft - 100 + "px";break;
      case 38:
        ele.style.top = ele.offsetTop - 100 + "px";break;
      case 39:
        ele.style.left = ele.offsetLeft + 100 + "px";break;
      case 40:
        ele.style.top = ele.offsetTop + 100 + "px";break;
    }
  }
  
</script>
</html>